<template>
	<view class="confirm-step-box">
		<view class="confirm-item" v-for="(item, index) in stepList" :key="index">
			<view class="confirm-item-head">
				<view class="confirm-item-head-line"></view>
				<view class="confirm-item-head-text">
					<image v-if="item.type == 1 || item.type == 2" src="../../static/approval_user.png" mode=""></image>
					<image v-else src="../../static/approval_copy.png" mode=""></image>
				</view>
			</view>
			<view class="confirm-item-content">
				<view class="item-content-head">
					<view class="item-content-head-text">{{item.type == 2 ? '审批人' : '抄送人'}}</view>
				</view>
				<view v-if="item.type == 2">
					<view class="item-content-main">
						<view class="content-main-head">
							<view class="main-head-text" v-for="(user, index) in item.checker" :key="index">
								<view class="user-box">
									<image class="avatar" src="../../static/logo/logo_1024.png" mode=""></image>
									<view>{{user.realname}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="item-content-main">
						<view class="content-main-head">
							<view class="main-head-text" v-for="(user, index) in item.copy" :key="index">
								<view class="user-box">
									<image class="avatar" src="../../static/logo/logo_1024.png" mode=""></image>
									<view>{{user.realname}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'steps',
		props: {
			stepList: {
				type: Array,
				default: []
			},
			moreBtn: {
				type: Boolean,
				default () {
					return true
				}
			}
		},
		data() {
			return {
				status: {
					0: {
						title: '待审核',
						color: '#999'
					},
					1: {
						title: '审核通过',
						color: '#409EFF'
					},
					2: {
						title: '审核驳回',
						color: 'red'
					},
					3: {
						title: '已转交',
						color: '#999'
					},
					13: {
						title: '已撤销',
						color: '#999'
					},
				},
			}
		},
		methods: {

		}
	}
</script>

<style lang="less">
	.confirm-step-box {
		display: flex;
		flex-flow: column;
		margin-top: 12px;

		.confirm-item {
			position: relative;
			padding: 0 10px;
			display: flex;
			flex-shrink: 1;

			.confirm-item-head {
				position: relative;
				flex-grow: 0;

				.confirm-item-head-line {
					position: absolute;
					width: 2px;
					top: 0;
					bottom: 0;
					left: 11px;
					border-color: inherit;
					background-color: #c0c4cc;
				}

				.confirm-item-head-text {
					position: relative;
					z-index: 1;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					width: 24px;
					height: 24px;
					box-sizing: border-box;
					background: #fff;
					font-size: 12px;
					
					image{
						width: 40px;
						height: 25px;
					}
					
				}

			}

			.confirm-item-content {
				padding-left: 10px;
				padding-bottom: 20px;
				white-space: normal;
				flex: 1;
				flex-grow: 1;
				text-align: left;

				.item-content-head {
					padding-bottom: 3px;
					display: flex;
					cursor: pointer;

					.item-content-head-text {
						width: 8rem;
						line-height: 24px;
						font-size: 14px;
						color: #333;
					}

					.item-content-head-more {
						flex: 1;
						text-align: end;
					}

				}

			}

			.item-content-main {

				.content-main-head {
					display: flex;
					align-items: center;
				}

				.main-head-text {
					flex: 0 25%;
					line-height: 24px;
					font-size: 14px;
					color: #333;

					.user-box {
						text-align: left;
						font-size: 12px;
						
						.avatar {
							width: 30px;
							height: 30px;
						}

					}

				}

				.main-head-more {
					flex: 1;
					text-align: end;
				}

			}

		}

	}
</style>
